<!-- subpkg_consult/room/index.vue -->
<script lang="ts" setup>
import { useUserStore } from "@/stores/user"
import { io } from "socket.io-client"
import type { Socket } from "socket.io-client"
const store = useUserStore()

const props = defineProps<{ orderId: string; payResult: string }>()

// 建立socket链接
// io('服务端地址wss', 配置对象) =>
const socket: Socket = io("https://consult-api.itheima.net", {
  auth: { token: "Bearer " + store.user.token },
  query: { orderId: props.orderId },
  transports: ["websocket", "polling"],
  timeout: 5000,
})
// 你怎么知道建立好了  => 监听事件
socket.on("connect", () => {
  // 建立连接成功
  console.log("连接建立成功")
})

socket.on("error", (event) => {
  // 错误异常消息
  console.log("出现错误")
})

socket.on("disconnect", () => {
  // 已经断开连接
  console.log("断开连接")
})

// 这里还会监听很多事件 等待服务器发送消息
</script>

<template>
  <view class="room-page">
    <scroll-view
      refresher-enabled
      refresher-background="#f2f2f2"
      scroll-y
      style="flex: 1; overflow: hidden"
    >
      <view class="message-container">
        <!-- 此处将来填充更多代码... -->
      </view>
    </scroll-view>

    <!-- 发送消息 -->
    <view class="message-bar">
      <template v-if="true">
        <uni-easyinput
          disabled
          :clearable="false"
          :input-border="false"
          placeholder-style="font-size: 32rpx; color: #c3c3c5;"
          placeholder="问医生"
        />
        <view class="image-button">
          <uni-icons size="40" color="#979797" type="image"></uni-icons>
        </view>
      </template>
      <button v-else class="uni-button">咨询其它医生</button>
    </view>
  </view>
</template>

<style lang="scss">
@import "./index.scss";
</style>
